<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到，PP聊天大厅</title>
    <script src="http://cdn.bootcss.com/sockjs-client/1.1.5/sockjs.min.js"></script>
    <style>
        body{
            height:100%;
            width:100%;
            margin: 0px;
        }
        #container{
            height:1000px;
            width: 300px;
            box-sizing: border-box;
            margin: 0 auto;
            padding-left: 100px;
            padding-right: 100px;
            background-color: white;
        }
        #input{
            height:200px;
            width:800px;
            background-color: aquamarine;
        }
        #out{
            line-height: 30px;
            width:600px;
            background-color: aliceblue;
        }
        #send{
            line-height: 30px;
            width: 200px;
            background-color: cadetblue;
            border-radius: 5px;
            border-width: 0px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="input"></div>
    <input id="out" type="text" />
    <button id="send">发送</button>
</div>

<script language="javascript" type="text/javascript">

    const out = document.getElementById("out");
    const input = document.getElementById("input");
    const send = document.getElementById("send");

    /* 客户端的WebSocket对象无法获取标识符 */
    const userUrl = "ws://localhost/user";
    const userSocket = new WebSocket(userUrl);

    userSocket.onopen = e=>{
        console.log("连接到user端点：");
        console.log(e);
    }

    userSocket.onmessage = e=>{
        console.log("接收到消息："+e.data);
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = e.data;
        input.appendChild(pre);
    }

    userSocket.onerror = e=>{
        console.log("连接出错");
        console.log(e);
    }

    send.onclick = ()=>{
        console.log("发送消息："+out.value);
        userSocket.send(out.value);
        out.value = "";
    }


</script>
</body>
</html>